<template>
	<div>
		<div class="top">
			产量信息统计 <span>产量信息数据报表</span>
		</div>
		<div class="box">
			<p>所有的生产详细信息数据</p>
			<el-table :data="biao" style="width: 100%">
				<el-table-column prop="id" label="序号">
				</el-table-column>
				<el-table-column prop="ming" label="设备名称">
				</el-table-column>
				<el-table-column prop="date" label="开始时间">
				</el-table-column>
				<el-table-column prop="date" label="结束时间">
				</el-table-column>
				<el-table-column prop="xing" label="规格型号">
				</el-table-column>
				<el-table-column prop="flag" label="是否发生过报警">
				</el-table-column>
				<el-table-column label="操作">
					<span class="del">删除</span><span class="bian">编辑</span>
				</el-table-column>
				<el-table-column label="查看详细">
					<span class="cha">查看</span>
				</el-table-column>
			</el-table>
			<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="title">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	import axios from 'axios'
	import '@/mock/list.js'
	export default {
		data() {
			return {
				biao: [],
				pageindex:1,
				pagesize:10,
				title:0
			}
		},
		created() {
			this.Get()
		},
		methods: {
			handleCurrentChange(val) {
				this.pageindex = val;
				this.Get()
			},
			Get(){
				axios.get('/api/get/biao',{
						params:{
							pageindex:this.pageindex,
							pagesize:10
						}
					})
					.then(res => {
						this.biao = res.data.data.biao;
						// console.log(this.biao);
						this.title = res.data.title
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		padding: 10px;

		.el-pagination {
			text-align: right;
			padding: 20px 10px 10px;
		}
		.del{
			background-color: #d30000;
			padding: 10px;
			margin-right: 5px;
			color: #fff;
		}
		.bian{
			background-color: #ff884c;
			padding: 10px;
			color: #fff;
		}
		.cha{
			background-color: #72ff82;
			padding: 10px;
			color: #000;
		}
	}

	.top {
		font-size: 24px;
		line-height: 40px;

		span {
			font-size: 15px;
		}
	}
</style>
